<template>
  <div class="live">
    <h4>直播管理</h4>

    <div class="live-two">
      <el-select v-model="val" placeholder="请选择" @change="changelive">
        <el-option label="全部直播" value="全部直播"> </el-option>
        <el-option label="直播中" value="直播中"> </el-option>
        <el-option label="已结束" value="已结束"> </el-option>
      </el-select>

      <p>
        <input type="text" placeholder="姓名、ID" v-model="sea" />
        <button @click="btnsea">搜索</button>
      </p>
    </div>
    <div class="live-one">
      <h3>{{ selectstate }}</h3>
      <dl v-for="(item, index) in liveList" :key="index">
        <dt><img :src="item.img" alt="" @click="detail(item.id)" /></dt>
        <dd>
          <p>{{ item.title }}</p>
          <p>
            <span>{{ item.name }}</span>
            <span>{{ item.date }}</span>
          </p>
          <p>{{ item.ongoing }}</p>
          <p v-show="item.ongoing === '直播中'">
            <span>进入直播</span>
            <span>
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </span>
          </p>
          <p v-show="item.ongoing === '已结束'">
            <span>回看</span>
            <span> 删除 </span>
          </p>
        </dd>
      </dl>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      liveList: [],
      value: true,
      total: null,
      pageNum: 1,
      pageSize: 12,
      currentPage4: 1,
      val: "",
      sea: "",
      selectstate: "全部直播",
    };
  },

  methods: {
    //分页
    pagelist(pageNum, pageSize) {
      this.$http
        .post("/api/getVadio", {
          pageNum: pageNum,
          pageSize: pageSize,
        })
        .then((res) => {
          console.log(res);
          this.liveList = res.data.data;
          this.total = res.data.total;
        });
    },

    handleCurrentChange(val) {
      this.pageNum = val;
      this.pagelist(this.pageNum, this.pageSize);
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.pagelist(this.pageNum, this.pageSize);
    },

    //详情
    detail(id) {
      this.$router.push(`/Detail/${id}`);
    },

    //状态筛选
    changelive() {
      console.log(this.val);
      if (this.val === "全部直播") {
        this.pagelist(this.pageNum, this.pageSize);
        this.selectstate = this.val;
      } else {
        this.selectstate = this.val;
        this.$http
          .post("/api/select", {
            ongoing: this.val,
          })
          .then((res) => {
            console.log(res);
            if (res.data.code === 1) {
              this.$message.success(res.data.message);
              this.liveList = res.data.data;
            }
          });
      }
    },
    //搜索
    btnsea() {
      this.$http
        .post("/api/searchName", {
          name: this.sea,
        })
        .then((res) => {
          console.log(res);
          this.liveList = res.data.data;
        });
    },
  },

  created() {
    this.pagelist(this.pageNum, this.pageSize);
  },
};
</script>

<style>
h4{
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e6e6e6;
}
.live-one {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.live-one h3 {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
}
.live-one dl {
  width: calc(100% / 6);
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 15px 0;
}
.live-one dl dt {
  width: 80%;
  height: 50%;
}
.live-one dl dt img {
  width: 100%;
  height: 100%;
}
.live-one dl dd {
  height: 130px;
  line-height: 30px;
}
.live-one dl dd p {
  display: flex;
  justify-content: space-between;
}
/* .live-one dl dd p:nth-child(1){
  font-size: 14px;
} */
.live-one dl dd p:nth-child(3) {
  position: absolute;
  left: 10%;
  top: 35%;
  color: red;
}
.live-two{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.live-two p{
  padding: 0 10px;
}
.live-two p input {
  padding: 10px 0;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
}
.live-two p button {
  margin: 0 5px;
  padding: 9px 10px;
  background: skyblue;
  color: #fff;
  border: none;
}
</style>